@import url(./svg.css);
@import url(./transition.css);
:root {
  --max-width: 1600px;
  --gap: 2rem;
  --main-gradient: linear-gradient(130deg, #24c6dc, #5433ff 41.07%, #ff0099 76.05%);
  --theme-transition: all 250ms ease;
  --el-overlay-color-lighter: rgba(0,0,0,.5)
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59,130,246,.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
}

.theme-light {
  --background-primary: #f1f3f9;
  --background-primary-alt: #fafafa;
  --background-secondary: #ffffff;
  --background-secondary-alt: #2e3236;
  --background-trans: rgba(0, 0, 0, 0.15);
  --text-bright: #000000;
  --text-normal: #333333;
  --text-accent: #e93796;
  --text-sub-accent: #547ce7;
  --text-faint: #b2b2b2;
  --text-dim: #858585;
  --text-title-h1: #333;
  --text-title-h2: #333;
  --text-title-h3: #333;
  --text-title-h4: #333;
  --text-title-h5: #333;
  --text-link: #b4b4b4;
  --text-a: #db4d52;
  --text-a-hover: #db4d52;
  --bg-accent-55: rgba(244, 86, 157, 0.55);
  --bg-sub-accent-55: rgba(13, 185, 215, 0.55);
  --bg-accent-05: rgba(244, 86, 157, 0.05);
  --strong-gradient: linear-gradient(62deg, #188bfd 0%, #a03bff 100%) !important;
  --gradient-cover: linear-gradient(90deg,
      hsla(0, 0%, 98%, 0) 0,
      hsla(0, 0%, 98%, 0.013) 8.1%,
      hsla(0, 0%, 98%, 0.049) 15.5%,
      hsla(0, 0%, 98%, 0.104) 22.5%,
      hsla(0, 0%, 98%, 0.175) 29%,
      hsla(0, 0%, 98%, 0.259) 35.3%,
      hsla(0, 0%, 98%, 0.352) 41.2%,
      hsla(0, 0%, 98%, 0.45) 47.1%,
      hsla(0, 0%, 98%, 0.55) 52.9%,
      hsla(0, 0%, 98%, 0.648) 58.8%,
      hsla(0, 0%, 98%, 0.741) 64.7%,
      hsla(0, 0%, 98%, 0.825) 71%,
      hsla(0, 0%, 98%, 0.896) 77.5%,
      hsla(0, 0%, 98%, 0.951) 84.5%,
      hsla(0, 0%, 98%, 0.987) 91.9%,
      var(--background-secondary));
  --article-cover: linear-gradient(180deg,
      hsla(0, 0%, 98%, 0) 0,
      hsla(0, 0%, 98%, 0.013) 8.1%,
      hsla(0, 0%, 98%, 0.049) 15.5%,
      hsla(0, 0%, 98%, 0.104) 22.5%,
      hsla(0, 0%, 98%, 0.175) 29%,
      hsla(0, 0%, 98%, 0.259) 35.3%,
      hsla(0, 0%, 98%, 0.352) 41.2%,
      hsla(0, 0%, 98%, 0.45) 47.1%,
      hsla(0, 0%, 98%, 0.55) 52.9%,
      hsla(0, 0%, 98%, 0.648) 58.8%,
      hsla(0, 0%, 98%, 0.741) 64.7%,
      hsla(0, 0%, 98%, 0.825) 71%,
      hsla(0, 0%, 98%, 0.896) 77.5%,
      hsla(0, 0%, 98%, 0.951) 84.5%,
      hsla(0, 0%, 98%, 0.987) 91.9%,
      var(--background-secondary));
  --trans-ease: all 250ms ease;
  --accent-shadow: 0 20px 25px -5px rgba(232, 57, 255, 0.06), 0 10px 10px -5px rgba(53, 11, 59, 0.1);
  --sub-accent-shadow: 0 20px 25px -5px rgba(71, 190, 255, 0.06), 0 10px 10px -5px rgba(11, 42, 59, 0.1);
  --search-modal-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
  --search-modal-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
  --custom-quote-tip: #7343d5;
  --custom-quote-warning: #e98503;
  --custom-quote-danger: #dd2500;
  --custom-quote: #e93796;
}

.theme-dark {
  --background-primary: #1a1a1a;
  --background-primary-alt: #0d0b12;
  --background-secondary: #212121;
  --background-secondary-alt: #0d0b12;
  --background-trans: rgba(255, 255, 255, 0.15);
  --skeleton-bg: #2e2e2e;
  --skeleton-hl: #363636;
  --text-bright: #fff;
  --text-normal: #bebebe;
  --text-accent: #0fb6d6;
  --text-sub-accent: #f4569d;
  --text-dim: #6d6d6d;
  --text-faint: #7aa2f7;
  --text-title-h1: var(--text-accent);
  --text-title-h2: #cbdbe5;
  --text-title-h3: #cbdbe5;
  --text-title-h4: #cbdbe5;
  --text-title-h5: #cbdbe5;
  --text-link: #b4b4b4;
  --text-a: #6bcafb;
  --text-a-hover: #6bcafb;
  --bg-sub-accent-55: rgba(244, 86, 157, 0.55);
  --bg-accent-55: rgba(13, 185, 215, 0.55);
  --bg-accent-05: rgba(14, 210, 247, 0.05);
  --strong-gradient: linear-gradient(62deg, #87c2fd 0%, #dcb9fc 100%) !important;
  --gradient-cover: linear-gradient(90deg,
      hsla(0, 0%, 13%, 0) 0,
      hsla(0, 0%, 13%, 0.013) 8.1%,
      hsla(0, 0%, 13%, 0.049) 15.5%,
      hsla(0, 0%, 13%, 0.104) 22.5%,
      hsla(0, 0%, 13%, 0.175) 29%,
      hsla(0, 0%, 13%, 0.259) 35.3%,
      hsla(0, 0%, 13%, 0.352) 41.2%,
      hsla(0, 0%, 13%, 0.45) 47.1%,
      hsla(0, 0%, 13%, 0.55) 52.9%,
      hsla(0, 0%, 13%, 0.648) 58.8%,
      hsla(0, 0%, 13%, 0.741) 64.7%,
      hsla(0, 0%, 13%, 0.825) 71%,
      hsla(0, 0%, 13%, 0.896) 77.5%,
      hsla(0, 0%, 13%, 0.951) 84.5%,
      hsla(00, 0%, 13%, 0.987) 91.9%,
      var(--background-secondary));
  --article-cover: linear-gradient(180deg,
      hsla(0, 0%, 13%, 0) 0,
      hsla(0, 0%, 13%, 0.013) 8.1%,
      hsla(0, 0%, 13%, 0.049) 15.5%,
      hsla(0, 0%, 13%, 0.104) 22.5%,
      hsla(0, 0%, 13%, 0.175) 29%,
      hsla(0, 0%, 13%, 0.259) 35.3%,
      hsla(0, 0%, 13%, 0.352) 41.2%,
      hsla(0, 0%, 13%, 0.45) 47.1%,
      hsla(0, 0%, 13%, 0.55) 52.9%,
      hsla(0, 0%, 13%, 0.648) 58.8%,
      hsla(0, 0%, 13%, 0.741) 64.7%,
      hsla(0, 0%, 13%, 0.825) 71%,
      hsla(0, 0%, 13%, 0.896) 77.5%,
      hsla(0, 0%, 13%, 0.951) 84.5%,
      hsla(00, 0%, 13%, 0.987) 91.9%,
      var(--background-secondary));
  --trans-ease: all 250ms ease;
  --accent-shadow: 0 20px 25px -5px rgba(11, 42, 59, 0.35), 0 10px 10px -5px rgba(11, 42, 59, 0.14);
  --sub-accent-shadow: 0 20px 25px -5px rgba(53, 11, 59, 0.35), 0 10px 10px -5px rgba(53, 11, 59, 0.14);
  --search-modal-key-gradient: linear-gradient(-225deg, #3f3e3e, #2c2c2c);
  --search-modal-key-shadow: inset 0 -2px 0 0 #363636, inset 0 0 1px 1px #2e2e2e, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
  --custom-quote-tip: #8d53ff;
  --custom-quote-warning: #cbcb00;
  --custom-quote-danger: #dd2500;
  --custom-quote: #5dc3d9;
}

html {
  font-family: 'Regular';
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
}

a {
  list-style: none;
}

div {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hidden {
  height: 100vh !important;
  overflow: hidden !important;
}

.el-drawer {
  background-color: var(--background-primary) !important;
}

.el-drawer__header {
  font-size: 18px !important;
}

.el-avatar {
  font-size: 25px !important;
}

.avatar-animate {
  margin-right: 10px;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.8s;
 
}
.avatar-animate:hover {
  transform: rotate(1turn);
}


@keyframes leftOpacity {
  from {position: relative; left: -50px;opacity: 0;}
  to {position: relative;left: 0px;opacity: 1;}
}
.comeInLeft {
  opacity: 0;
  animation:leftOpacity;
  animation-fill-mode:forwards;
  animation-timing-function: ease;
}

